
:root {
	--left: linear-gradient( 90deg, #F7F7FD 8%, rgba(255,255,255,0.7) 36%, rgba(255,255,255,0) 52%);
	--right: linear-gradient( -90deg, #F1F3FC 8%, rgba(255,255,255,0.7) 36%, rgba(255,255,255,0) 52%);
}
.production-header {
    min-width: 1440px;
    height: 524px;
    display: flex;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.production-container {
    margin-top: 202px;
    width: 1240px;
}
.production-title {
    font-weight: bold;
    font-size: 48px;
    color: #000;
    line-height: 60px;
}
.production-connect {
	margin-top: 32px;
	width: 136px;
	background: #007DFF;
	border-radius: 4px;
	font-size: 16px;
	text-align: center;
	color: #FFF;
	line-height: 40px;
	cursor: pointer;
}

.introduction-container {
    padding: 52px 0 80px 0;
    min-width: 1440px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.introduction-container .title {
    font-weight: bold;
    font-size: 24px;
    color: #000;
    line-height: 32px;
    text-align: center;
    letter-spacing: 0.35px;
}
.introduction-container .text {
    width: 1240px;
    font-size: 15px;
    color: #343944;
    line-height: 25px;
    text-indent: 2em;
    display: flex;
    letter-spacing: 0.35px;
}
.introduction-container .title + .text {
    margin-top: 24px;
}
.introduction-container img {
    margin-top: 24px;
}
.introduction-container .extra-title {
    width: 480px;
    height: 72px;
    font-size: 32px;
    font-weight: bold;
    color: #111;
    line-height: 60px;
    text-align: center;
    letter-spacing: 0.35px;
    background: url('../images/production/introduction/extra-title.png');
    background-size: cover;
    background-repeat: no-repeat;
}

.highlight-container {
    min-width: 1440px;
    padding-bottom: 80px;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.highlight-container .one-line-title {
    line-height: 56px;
    font-weight: bold;
    font-size: 24px;
    color: #000;
    text-align: center;
    letter-spacing: 0.35px;
}
.highlight-container .title {
    margin-top: 60px;
    font-weight: bold;
    font-size: 24px;
    color: #000;
    line-height: 32px;
    text-align: center;
}
.highlight-container >.text {
    width: 1240px;
}
.highlight-container .highlight-content {
    display: flex;
    justify-content: center;
    gap: 72px;
}
.highlight-content .item {
    width: 196px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.highlight-content .item img {
    width: 120px;
    height: 120px;
}
.highlight-content .sub-title {
    font-weight: bold;
    font-size: 20px;
    color: #343944;
    line-height: 21px;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.35px;
}
.highlight-container >.text, .highlight-content .text {
    font-size: 15px;
    color: #343944;
    line-height: 25px;
    text-indent: 2em;
}
.highlight-content .item .text {
    margin-top: 16px;
}
.highlight-container .card-item {
    box-shadow: 0 0 20px 0 rgba(159, 197, 235, 0.4);
    align-items: start;
    position: relative;
}
.highlight-content .card-item .sub-title {
    color: #000;
    text-align: left;
}
.highlight-container .black .sub-title {
    color: #000;
}
.highlight-container .grey .sub-title {
    color: #343944;
}
.highlight-container .card-item .text {
    margin-top: 16px;
}
.card-item img {
    position: absolute;
}
.highlight-container .sub4 .sub-title {
    margin-top: 4px;
}
.highlight-container .sub16 .sub-title {
    margin-top: 16px;
}
.highlight-container .sub24 .sub-title {
    margin-top: 24px;
}
.highlight-container .sub26 .sub-title {
    margin-top: 26px;
}
.highlight-container .text10 .text {
    margin-top: 10px;
}

.scene-container {
    padding: 60px 0 80px 0;
    min-width: 1440px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.scene-container .title {
    font-weight: bold;
    font-size: 24px;
    color: #000;
    line-height: 32px;
    text-align: center;
    letter-spacing: 0.35px;
}
.scene-container .text {
    font-size: 15px;
    color: #343944;
    line-height: 25px;
    text-indent: 2em;
    letter-spacing: 0.35px;
}
.scene-container >.text, .scene-second >.text {
    width: 1240px;
}
.scene-container .title + .text, .scene-container .text + img {
    margin-top: 24px;
}
.scene-container .tips {
    margin-top: 16px;
    font-size: 15px;
    color: #343944;
    line-height: 25px;
    text-align: center;
}
.scene-content {
    display: flex;
}
.scene-content .item {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.scene-content .sub-title {
    font-weight: bold;
    font-size: 20px;
    color: #000;
    line-height: 20px;
    text-align: center;
    letter-spacing: 0.35px;
}
.scene-container .scene-second {
	padding-bottom: 80px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.scene-content .card-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
}
.scene-content .card-item .text {
    margin-top: 16px;
}

.before-circle {
    width: 10px!important;
    height: 10px!important;
    position: absolute;
}
.scene-switchs {
    display: flex;
    gap: 32px;
}
.switch-normal, .switch-selected {
    box-shadow: 0px 2px 4px 0px rgba(153, 168, 184, 0.4);
    -webkit-box-shadow: 0px 2px 4px 0px rgba(153, 168, 184, 0.4);
    border-radius: 1px;
    padding-left: 16px;
    width: 200px;
    font-size: 16px;
    line-height: 40px;
    letter-spacing: 0.35px;
    display: flex;
    gap: 40px;
}
.switch-normal {
    background: #FFF;
    color: #2668FA;
}
.switch-selected {
    background: linear-gradient(90deg, #4A88FF 0%, #1A5FF9 100%);
    color: #FFF;
}
.scene-switchs img {
    margin-top: 8px;
    width: 24px;
    height: 24px;
}
.text.center {
    display: block;
    text-align: center;
    text-indent: 0;
}
.no-top {
    padding-top: 0!important;
}
.no-bottom {
	padding-bottom: 0!important;
}
.icon132 img {
	width: 132px!important;
	height: 132px!important;
}
.icon140 img {
	width: 140px!important;
	height: 140px!important;
}
.icon160 img {
	width: 160px!important;
	height: 160px!important;
}
.icon172 img {
	width: 172px!important;
	height: 172px!important;
}
.icon180 img {
    width: 180px!important;
    height: 180px!important;
}
.carousel-item {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
}
.carousel .arrow-l, .carousel .arrow-r {
    width: 44px;
    height: 44px;
    cursor: pointer;
    position: absolute;
    z-index: 999;
}
.carousel-01.left {
	background-image: var(--left), var(--carousel-01);
}
.carousel-01.right {
	background-image: var(--right), var(--carousel-01);
}
.carousel-01.center {
	background-image: var(--carousel-01);
}
.carousel-02.left {
	background-image: var(--left), var(--carousel-02);
}
.carousel-02.right {
	background-image: var(--right), var(--carousel-02);
}
.carousel-02.center {
	background-image: var(--carousel-02);
}
.carousel-03.left {
	background-image: var(--left), var(--carousel-03);
}
.carousel-03.right {
	background-image: var(--right), var(--carousel-03);
}
.carousel-03.center {
	background-image: var(--carousel-03);
}

.mt8 {
    margin-top: 8px!important;
}
.mt10 {
    margin-top: 10px!important;
}
.mt12 {
    margin-top: 12px!important;
}
.mt14 {
    margin-top: 14px!important;
}
.mt16 {
    margin-top: 16px!important;
}
.mt18 {
    margin-top: 18px!important;
}
.mt20 {
    margin-top: 20px!important;
}
.mt22 {
    margin-top: 22px!important;
}
.mt24 {
    margin-top: 24px!important;
}
.mt26 {
    margin-top: 26px!important;
}
.mt28 {
    margin-top: 28px!important;
}
.mt30 {
    margin-top: 30px!important;
}
.mt32 {
    margin-top: 32px!important;
}
.mt34 {
    margin-top: 34px!important;
}
.mt36 {
    margin-top: 36px!important;
}
.mt38 {
    margin-top: 38px!important;
}
.mt40 {
    margin-top: 40px!important;
}
.mt44 {
    margin-top: 44px!important;
}
.mt46 {
    margin-top: 46px!important;
}
.mt48 {
    margin-top: 48px!important;
}
.mt50 {
    margin-top: 50px!important;
}
.mt52 {
    margin-top: 52px!important;
}
.mt54 {
    margin-top: 54px!important;
}
.mt56 {
    margin-top: 56px!important;
}
.mt58 {
    margin-top: 58px!important;
}
.mt60 {
    margin-top: 60px!important;
}
.mt62 {
    margin-top: 62px!important;
}
.mt64 {
    margin-top: 64px!important;
}
.mt66 {
    margin-top: 66px!important;
}
.mt68 {
    margin-top: 68px!important;
}
.mt72 {
    margin-top: 72px!important;
}
.mt74 {
    margin-top: 74px!important;
}
.mt76 {
    margin-top: 76px!important;
}
.mt78 {
    margin-top: 78px!important;
}
.mt80 {
    margin-top: 80px!important;
}
.mt84 {
    margin-top: 84px!important;
}
.mt88 {
    margin-top: 88px!important;
}
.mt90 {
    margin-top: 90px!important;
}
.mt92 {
    margin-top: 92px!important;
}
.mt94 {
    margin-top: 94px!important;
}
.mt96 {
    margin-top: 96px!important;
}
.mt98 {
    margin-top: 98px!important;
}
.mt100 {
    margin-top: 100px!important;
}
.mt106 {
    margin-top: 106px!important;
}
.mt120 {
    margin-top: 120px!important;
}
.mt124 {
    margin-top: 124px!important;
}
.mt128 {
    margin-top: 128px!important;
}
.mt132 {
    margin-top: 132px!important;
}

.w226 .item {
    width: 226px!important;
}
.w340 .item {
    width: 340px!important;
}

.w852 .text {
    width: 852px!important;
}
.text.no-indent {
    text-indent: 0
}
.text.bold {
    font-weight: bold;
}
.text.no-space {
    letter-spacing: 0;
}